<template>
  <el-dialog v-model="visible" title="批量导入问答" width="50%">
    <div class="import-steps">
      <el-steps :active="activeStep" finish-status="success">
        <el-step title="下载模板"></el-step>
        <el-step title="上传文件"></el-step>
        <el-step title="完成"></el-step>
      </el-steps>
    </div>
    
    <div v-if="activeStep === 0" class="step-content">
      <el-button type="primary" @click="downloadTemplate">下载模板</el-button>
    </div>
    
    <div v-if="activeStep === 1" class="step-content">
      <el-upload
        class="upload-demo"
        drag
        :action="uploadUrl"
        :before-upload="beforeUpload"
        :on-success="handleSuccess"
        :on-error="handleError"
        :file-list="fileList"
        accept=".xlsx,.xls,.csv"
      >
        <el-icon class="el-icon--upload"><upload-filled /></el-icon>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <template #tip>
          <div class="el-upload__tip">
            只能上传 Excel 文件 (XLS/XLSX/CSV)，且不超过10MB
          </div>
        </template>
      </el-upload>
    </div>
    
    <div v-if="activeStep === 2" class="step-content">
      <el-result
        icon="success"
        title="导入成功"
        sub-title="问答数据已成功导入系统"
      >
        <template #extra>
          <el-button type="primary" @click="finish">完成</el-button>
        </template>
      </el-result>
    </div>
    
    <div class="step-actions">
      <el-button v-if="activeStep > 0" @click="prev">上一步</el-button>
      <el-button v-if="activeStep < 2" type="primary" @click="next">下一步</el-button>
    </div>
  </el-dialog>
</template>

<script setup>
import { ref } from 'vue'

// import { importQas } from '@/api/knowledge'

const props = defineProps({
  modelValue: Boolean
})

// const emit = defineEmits(['update:modelValue', 'success'])

// const visible = computed({
//   get: () => props.modelValue,
//   set: (val) => emit('update:modelValue', val)
// })

const activeStep = ref(0)
const fileList = ref([])

const downloadTemplate = () => {
  // 下载模板文件逻辑
  ElMessage.success('模板下载成功')
}

const beforeUpload = (file) => {
  const isExcel = ['application/vnd.ms-excel', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', 'text/csv'].includes(file.type)
  
  if (!isExcel) {
    ElMessage.error('只能上传Excel文件')
    return false
  }
  
  if (file.size > 10 * 1024 * 1024) {
    ElMessage.error('文件不能超过10MB')
    return false
  }
  
  return true
}

const handleSuccess = (response, file) => {
  ElMessage.success(`${file.name} 上传成功`)
  next()
}

const handleError = (error, file) => {
  ElMessage.error(`${file.name} 上传失败: ${error.message}`)
}

const prev = () => {
  if (activeStep.value > 0) {
    activeStep.value--
  }
}

const next = () => {
  if (activeStep.value < 2) {
    activeStep.value++
  }
}

const finish = () => {
  emit('success')
  activeStep.value = 0
  visible.value = false
}
</script>

<style scoped>
.import-steps {
  margin-bottom: 20px;
}

.step-content {
  min-height: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.step-actions {
  margin-top: 20px;
  text-align: right;
}
</style>